<template>
    <div class="product-management">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品管理</span>
          <el-input 
            placeholder="搜索商品" 
            v-model="searchQuery" 
            clearable 
            style="width: 300px; float: left; margin-right: 10px;"
          ></el-input>
          <el-button type="primary" size="small" style="float: right;" @click="openAddDialog">添加商品</el-button>
        </div>
        <el-table :data="pagedProducts" style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="category" label="类别"></el-table-column>
          <el-table-column prop="price" label="价格" width="100"></el-table-column>
          <el-table-column prop="stock" label="库存" width="100"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="操作" width="180">
            <template v-slot="scope">
              <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteProduct(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredProducts.length"
          style="margin-top: 20px; text-align: right;">
        </el-pagination>
      </el-card>
  
      <el-dialog v-model="dialogVisible" :title="dialogTitle">
        <el-form :model="currentProduct">
          <el-form-item label="商品名称">
            <el-input v-model="currentProduct.name"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-input v-model="currentProduct.category"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="currentProduct.price"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="currentProduct.stock"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="currentProduct.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveProduct">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { ref, computed } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const products = ref([
        { id: 1, name: '手机', category: '电子产品', price: 6999, stock: 50, description: '最新款智能手机' },
        { id: 2, name: '电视', category: '家用电器', price: 3999, stock: 30, description: '4K超高清电视' },
        { id: 3, name: '衬衫', category: '服装', price: 199, stock: 100, description: '舒适透气衬衫' },
        { id: 4, name: '巧克力', category: '食品', price: 49, stock: 200, description: '纯黑巧克力' },
        { id: 5, name: '沙发', category: '家具', price: 2999, stock: 10, description: '高档真皮沙发' },
        { id: 6, name: '积木', category: '玩具', price: 299, stock: 150, description: '益智积木玩具' },
        { id: 7, name: '小说', category: '图书', price: 99, stock: 80, description: '畅销小说' },
        { id: 8, name: '篮球', category: '运动用品', price: 299, stock: 60, description: '标准尺寸篮球' },
        { id: 9, name: '笔记本', category: '办公用品', price: 49, stock: 500, description: '精美笔记本' },
        { id: 10, name: '护手霜', category: '个人护理', price: 99, stock: 120, description: '保湿护手霜' },
        { id: 11, name: '刹车片', category: '汽车配件', price: 499, stock: 40, description: '耐用刹车片' }
      ]);
  
      const dialogVisible = ref(false);
      const dialogTitle = ref('');
      const currentProduct = ref({
        id: null,
        name: '',
        category: '',
        price: null,
        stock: null,
        description: ''
      });
  
      const searchQuery = ref('');
      const currentPage = ref(1);
      const pageSize = ref(10);
  
      const filteredProducts = computed(() => {
        return products.value.filter(product => 
          product.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          product.category.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          product.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        );
      });
  
      const pagedProducts = computed(() => {
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        return filteredProducts.value.slice(start, end);
      });
  
      const openAddDialog = () => {
        dialogTitle.value = '添加商品';
        currentProduct.value = { id: null, name: '', category: '', price: null, stock: null, description: '' };
        dialogVisible.value = true;
      };
  
      const openEditDialog = (product) => {
        dialogTitle.value = '编辑商品';
        currentProduct.value = { ...product };
        dialogVisible.value = true;
      };
  
      const saveProduct = () => {
        if (currentProduct.value.name.trim() === '' || currentProduct.value.category.trim() === '') {
          ElMessage.error('商品名称和类别不能为空');
          return;
        }
        if (currentProduct.value.id) {
          // 编辑商品
          const index = products.value.findIndex(product => product.id === currentProduct.value.id);
          if (index !== -1) {
            products.value.splice(index, 1, currentProduct.value);
          }
        } else {
          // 添加商品
          currentProduct.value.id = products.value.length + 1;
          products.value.push(currentProduct.value);
        }
        dialogVisible.value = false;
      };
  
      const deleteProduct = (id) => {
        ElMessageBox.confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          products.value = products.value.filter(product => product.id !== id);
          ElMessage.success('删除成功');
        }).catch(() => {
          ElMessage.info('已取消删除');
        });
      };
  
      const handleSizeChange = (size) => {
        pageSize.value = size;
      };
  
      const handleCurrentChange = (page) => {
        currentPage.value = page;
      };
  
      return {
        products,
        dialogVisible,
        dialogTitle,
        currentProduct,
        searchQuery,
        currentPage,
        pageSize,
        filteredProducts,
        pagedProducts,
        openAddDialog,
        openEditDialog,
        saveProduct,
        deleteProduct,
        handleSizeChange,
        handleCurrentChange
      };
    }
  };
  </script>
  
  <style scoped>
  .product-management {
    padding: 20px;
    width: 80%;
  }
  
  .el-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .el-table {
    border-radius: 8px;
    overflow: hidden;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  .dialog-footer {
    text-align: right;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  </style>
  